<script type="text/javascript">
	
	{{for point in pointData:}}
		{{if (point[3] + point[4]) <= 50:}}
			var color = '#72E64B'
		{{elif ((point[3] + point[4]) > 50) and ((point[3] + point[4]) <= 200):}}
			var color = '#EBF533'
		{{else:}}
			var color = '#F53340'
		{{pass}}

		circleOptions = {
			strokeColor: color,
			fillColor: color,
			center: new google.maps.LatLng({{=point[1]}},{{=point[2]}}),
			radius: ({{=point[3]}}+{{=point[4]}})/{{=dividefactor}},
		};
		{{=point[0].replace(" ", "")}}circle.setOptions(circleOptions);

		google.maps.event.addListener({{=point[0].replace(" ", "")}}circle, "click", function(event){
			var infoContent = "<b>{{=point[0]}}</b><br><p><b>Date:</b> {{=point[5]}}<br>{{if str(point[6]) == str(None):}} <b>Time:</b> 00:00:00 {{else:}} <b>Time:</b> {{=point[6]}}{{pass}}<br> <b>Traffic In:</b> {{=point[3]}}<br><b>Traffic Out:</b> {{=point[4]}}</p>"
			infowindow.setContent(infoContent);
			infowindow.setPosition(new google.maps.LatLng({{=point[1]}},{{=point[2]}}));
			infowindow.open(map);
		});
		
		var markerOptions = {
			position: new google.maps.LatLng({{=point[1]}},{{=point[2]}}),
			labelContent: "{{=point[0]}}",
		}
		{{=point[0].replace(" ", "")}}marker.setOptions(markerOptions);
		
		google.maps.event.addListener({{=point[0].replace(" ", "")}}marker, "click", function(event){
			var infoContent = "<b>{{=point[0]}}</b><br><p><b>Date:</b> {{=point[5]}}<br>{{if str(point[6]) == str(None):}} <b>Time:</b> 00:00:00 {{else:}} <b>Time:</b> {{=point[6]}}{{pass}}<br> <b>Traffic In:</b> {{=point[3]}}<br><b>Traffic Out:</b> {{=point[4]}}</p>"
			infowindow.setContent(infoContent);
			infowindow.setPosition(new google.maps.LatLng({{=point[1]}},{{=point[2]}}));
			infowindow.open(map);
		});

	{{pass}}

	var trafficData = google.visualization.arrayToDataTable([
		['Location', 'in', 'out'],
		{{for point in pointData:}}
			['{{=point[0]}}',  {{=point[3]}}, {{=point[4]}}],
		{{pass}}
	]);

	var classData = google.visualization.arrayToDataTable([
		['Time', 'Classes'],
		{{for value in classes:}}
			['Classes',  {{=value[1]}}],
		{{pass}}
	]);

	var baroptions = {
		title: "Total Traffic",
		titleTextStyle: {color: '#FFFFFF'},
		vAxis: {
				titleTextStyle: {color: '#FF0000'}, 
				textStyle: {color: '#FFFFFF'},
				format: '##',
				minValue: 20,
				baselineColor: '#FFFFFF'
		},
		hAxis: {
			textStyle: {color: '#FFFFFF'},
		},
		legend: {
			textStyle: {color: '#FFFFFF'},
		},
		colors: ['#0080FF','#FF0000'],
		animation:{
			duration: 500,
			easing: 'out',
		},
		backgroundColor: { fill:'transparent' },
		fontSize: 13,
	};

	barchart.draw(trafficData, baroptions);
		
	var pieoptions = {
		title: "Concurrent Classes at {{=classes[0][0]}}",
		titleTextStyle: {color: '#FFFFFF'},
		vAxis: {
				titleTextStyle: {color: '#FF0000'},
				textStyle: {color: '#FFFFFF'},
				format: '##',
				minValue: 40,
				maxValue: 100,
				baselineColor: '#FFFFFF'
		},
		bar: {
			groupWidth: 50,
		},
		hAxis: {
			textStyle: {color: '#FFFFFF'},
		},
		colors: ['#FAFA3C'],
		animation:{
			duration: 500,
			easing: 'out',
		},
		legend: 'none',
		backgroundColor: { fill:'transparent' },
		fontSize: 13,
	};

	piechart.draw(classData, pieoptions);

	heatmapData = [
		{{for point in pointData:}}
			{location: new google.maps.LatLng({{=point[1]}}, {{=point[2]}}), weight: ({{=point[3]}}+{{=point[4]}})},
		{{pass}}
	]

	heatmapLayer.setData(heatmapData);

</script>